<template>
  <div class="vistual-detective">
    <div class="palette-wrap">
      <div id="myPaletteDiv" style="width: 100%; height: 200px; margin-bottom: 2px; background-color: whitesmoke; border: solid 1px black">
        <xdh-go :palette="true" :type="paletteModel"
                :config="configPalette" 
                :nodes="paletteNodes"
                :node-template-map="paletteTemplateMap"
                ref="palette"
        ></xdh-go>
      </div>
    </div>

    <div class="diagram-wrap" id="myDiagramDiv" >
      <xdh-go :palette="false" :type="diagramModel"
              :config="configDiagram"
              :node-template-map="diagramTemplateMap"
              @on-ready="diagramReadyHandler"
              ref="diagram"
      ></xdh-go>
      <go-menu ref="menu1">
        <circle-menu
          :menu-list="listData1"
          @on-item-click="itemClick"
          :inner-radius="50"
          :item-width="40"
          :active-color="'rgba(245, 108, 108, 0.8)'"
          :normal-color="'rgba(230, 162, 60, 0.8)'"
          :item-style="{color: '#fff'}"
        >
        </circle-menu>
      </go-menu>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.vistual-detective{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  .palette-wrap{
    flex: 0 0 20%;
    width: 20%;
    min-width: 150px;
    height: 100%;
  }
  .diagram-wrap{
    flex: 1;
    height: 100%;
    background: #F5F5F5;
  }
}
</style>

<script>
import XdhGo from '@/widgets/xdh-go'
import goMenu from '@/widgets/xdh-go/go-menu'
import circleMenu from '@/widgets/xdh-go/menus/circle-menu'
import {
  palettePersonTemplate,
  paletteCarTemplate,
  diagramPersonTemplate,
  diagramCarTemplate
} from './nodeTemplateMap.js'

export default {
  name: 'vistualDetective',
  components: {
    XdhGo,
    goMenu,
    circleMenu
  },
  data() {
    return {
      diagram: null,
      paletteModel: 'GraphLinksModel',
      diagramModel: 'GraphLinksModel',
      nodes: [
      ],
      paletteNodes: [
        { category: 'Person', text: '人' },
        { category: 'Car', text: '车' }
      ],
      diagramEvents: {
        'mouseDrop': (e) => {
          console.log('e', e)
        }
      },
      listData1: [
        {
          text: '菜单一',
          subMenu: [{ text: '子菜单1_1' }, { text: '子菜单1_2' }]
        },
        { text: '菜单二', subMenu: [{ text: '子菜单2_1' }, { text: '子菜单2_2' }] },
        {
          text: '菜单三',
          subMenu: [{ text: '子菜单3_1' }, { text: '子菜单3_2' }]
        }
      ]
    }
  },
  methods: {
    showData() {
      console.log(this.diagram.model.toJson())
    },
    diagramReadyHandler(diagram, $, go) {
      this.diagram = diagram
      // console.log(this.$refs.menu1)
    },
    configPalette($, go) {
      return {
        scrollsPageOnFocus: false,
        layout: $(go.GridLayout)
      }
    },
    configDiagram($, go) {
      return {
        initialContentAlignment: go.Spot.Center,
        allowDrop: true,
        scrollsPageOnFocus: false,
        'undoManager.isEnabled': true,
        Modified: function(e) {
          console.log(e.diagram.model)
        }
      }
    },
    personNodeTemplate($, go) {
      return diagramPersonTemplate($, go)
    },
    paletteTemplateMap($, go) {
      const person = palettePersonTemplate($, go)
      const car = paletteCarTemplate($, go)
      const map = new go.Map()
      map.add('Person', person)
      map.add('Car', car)
      return map
    },
    diagramTemplateMap($, go) {
      // contextMenu: 
      const person = diagramPersonTemplate($, go, this.$refs.menu1.bindMenu())
      const car = diagramCarTemplate($, go)
      const map = new go.Map()
      map.add('Person', person)
      map.add('Car', car)
      return map
    },
    itemClick(e) {
      console.log('e', e)
    }
  },
  mounted() {
  }
}
</script>